.Popup-Card {
  width: 220px;
  box-sizing: border-box;
  padding: 8px;
  font-family: Microsoft YaHei UI;
  .welcome-box {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    > img {
      width: 200px;
      height: 113px;
    }
  }
  .OnAndoff {
    display: flex;
    justify-content: space-between;
    #on-tips {
      position: relative;
      top: 0px;
      text-wrap: nowrap;
      color: #333333;
      font-weight: 600;
      font-size: 13px;
    }
    .on-switch {
      position: relative;
      width: 40px;
      margin-right: 4px;
      top: 0px;

      #on-but {
        position: absolute;
        //background-color: #436ff6;
        background-color: #ffffff;
        box-shadow: 0px 2px 16px 0px rgb(195, 195, 195);
        border-radius: 50%;
        width: 20px;
        height: 20px;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .min-radius {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #eeeeee;
        }
      }
      #back {
        position: absolute;
        //background-color: rgba(67, 111, 246, 0.12);
        background-color: #bdc1c6;
        width: 32px;
        height: 10px;
        top: 5px;
        left: 5px;
        border-radius: 8px;
      }
      #off-but {
        display: none;
        position: absolute;
        background-color: #436ff6;
        box-shadow: 0px 2px 16px 0px #bdc1c6;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        top: 0px;
        right: 0px;
        z-index: 1;
        justify-content: center;
        align-items: center;
        .min-radius {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #7094ff9e;
        }
      }
    }
  }
}
.options-box {
  display: none;
  width: 220px;
  background-color: #f5f6f7;
  box-sizing: border-box;
  padding: 8px;
  .setup-op {
    height: 20px;
    display: flex;
    align-items: flex-start;
    color: #666666;
  }
  .options-Card {
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    padding: 0px 8px;
    .OnAndoff {
      height: 28px;
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f5f5f5;
      .on-tips {
        color: #333333;
        //color: #ffffff42;
        position: relative;
        top: 0px;
        font-weight: 500;
      }
      .on-switch {
        position: relative;
        width: 32px;
        top: 0px;

        #on-but-eve {
          position: absolute;
          display: none;
          background-color: #ffffff;
          box-shadow: 0px 2px 16px 0px rgb(195, 195, 195);
          border-radius: 50%;
          width: 16px;
          height: 16px;
          z-index: 1;
        }
        #back-eve {
          position: absolute;
          background-color: rgba(67, 111, 246, 0.12);
          //background-color: #bdc1c6;
          width: 28px;
          height: 10px;
          top: 3px;
          left: 3px;
          border-radius: 8px;
        }
        #off-but-eve {
          position: absolute;
          background-color: #436ff6;
          box-shadow: 0px 2px 16px 0px #bdc1c6;
          border-radius: 50%;
          width: 16px;
          height: 16px;
          top: 0px;
          right: 0px;
          z-index: 1;
        }
      }
      .on-switch {
        position: relative;
        width: 32px;
        top: 0px;

        #on-but-card {
          position: absolute;
          display: none;
          //background-color: #436ff6;
          background-color: #ffffff;
          box-shadow: 0px 2px 16px 0px rgb(195, 195, 195);
          border-radius: 50%;
          width: 16px;
          height: 16px;
          z-index: 1;
        }
        #back-card {
          position: absolute;
          background-color: rgba(67, 111, 246, 0.12);
          //background-color: #bdc1c6;
          width: 28px;
          height: 10px;
          top: 3px;
          left: 3px;
          border-radius: 8px;
        }
        #off-but-card {
          display: block;
          position: absolute;
          background-color: #436ff6;
          box-shadow: 0px 2px 16px 0px #bdc1c6;
          border-radius: 50%;
          width: 16px;
          height: 16px;
          top: 0px;
          right: 0px;
          z-index: 1;
        }
      }
      .on-switch {
        position: relative;
        width: 32px;
        top: 0px;

        #on-but-sertips{
          position: absolute;
          //background-color: #436ff6;
          background-color: #ffffff;
          box-shadow: 0px 2px 16px 0px rgb(195, 195, 195);
          border-radius: 50%;
          width: 16px;
          height: 16px;
          z-index: 1;
        }
        #back-sertips {
          position: absolute;
          //background-color: rgba(67, 111, 246, 0.12);
          background-color: #bdc1c6;
          width: 28px;
          height: 10px;
          top: 3px;
          left: 3px;
          border-radius: 8px;
        }
        #off-but-sertips {
          display: none;
          position: absolute;
          background-color: #436ff6;
          box-shadow: 0px 2px 16px 0px #bdc1c6;
          border-radius: 50%;
          width: 16px;
          height: 16px;
          top: 0px;
          right: 0px;
          z-index: 1;
        }
      }
      .on-switch {
        position: relative;
        width: 32px;
        top: 0px;

        #on-but-tran {
          position: absolute;
          //background-color: #436ff6;
          background-color: #ffffff;
          box-shadow: 0px 2px 16px 0px rgb(195, 195, 195);
          border-radius: 50%;
          width: 16px;
          height: 16px;
          z-index: 1;
        }
        #back-tran {
          position: absolute;
          //background-color: rgba(67, 111, 246, 0.12);
          background-color: #bdc1c6;
          width: 28px;
          height: 10px;
          top: 3px;
          left: 3px;
          border-radius: 8px;
        }
        #off-but-tran {
          display: none;
          position: absolute;
          background-color: #436ff6;
          box-shadow: 0px 2px 16px 0px #bdc1c6;
          border-radius: 50%;
          width: 16px;
          height: 16px;
          top: 0px;
          right: 0px;
          z-index: 1;
        }
      }
      .on-switch {
        position: relative;
        width: 32px;
        top: 0px;

        #on-but-bgcolor {
          background-color: #F5F6F7;
          border-radius: 4px;
          width: 20px;
          height: 20px;
          margin: 0 auto;
        }
        #color{
          position: absolute;
          left: 4px;
          width: 20px;
          height: 20px;
          opacity: 0;

        }
      }
    }
    .OnAndoff-last {
      height: 28px;
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      .on-tips {
        color: #333333;
        position: relative;
        top: 0px;
        font-weight: 500;
      }
      .on-switch {
        position: relative;
        width: 32px;
        top: 0px;
        #upLoad{
          position: absolute;
          left: 4px;
          width: 20px;
          height: 20px;
          opacity: 0;

        }

        #on-but-bgimg {
          margin: 0 auto;
          //background-color: #436ff6;
          background-color: #ffffff;
          border-radius: 4px;
          box-shadow: 0px 2px 16px 0px rgb(195, 195, 195);
          width: 20px;
          height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1;
          > img {
            width: 20px;
            height: 20px;
            border-radius: 4px;
          }
        }
      }
    }
  }
}
